<template>
  <div class="app">
    <div class="top df jcsb aic">
      <div class="left">
        <h2>5.0</h2>
        <h3>综合评分</h3>
        <p class="p1">高于周边商家96%</p>
      </div>
      <div class="right">
        <p>
          服务态度
          <van-rate
            class="s1"
            v-model="value"
            :size="10"
            color="#ffd21e"
            void-icon="star"
            void-color="#eee"
          />
          <span class="s1">4.5</span>
        </p>
        <p>
          菜品质量
          <van-rate
            class="s1"
            v-model="value"
            :size="10"
            color="#ffd21e"
            void-icon="star"
            void-color="#eee"
          />
          <span class="s1">4.5</span>
        </p>
        <p>
          送达时间
          <span class="s2">20分钟</span>
        </p>
      </div>
    </div>
    <div class="box">
      <div class="nav df jcc aic">
        <van-tabs
          type="card"
          color="#ffc300"
          title-inactive-color="#ffc300"
          title-active-color="#000"
          @click="onClick"
        >
          <van-tab :title="`全部${rateList.length}`">
            <div class="title df" v-for="item in rateList" :key="item.rateTime">
              <img class="gg" :src="item.avatar" alt="" />
              <div class="user">
                <div class="df jcsb">
                  <p class="ko">{{ item.username }}</p>
                  <p>{{ item.rateTime }}</p>
                </div>
                <p>
                  <van-rate
                    class="s1"
                    v-model="value"
                    :size="10"
                    color="#ffd21e"
                    void-icon="star"
                    void-color="#eee"
                  />
                  {{ item.deliveryTime }}<span>分钟送达</span>
                </p>
                <p>{{ item.text }}</p>
                <p class="ee">
                  <van-icon name="good-job-o" size="20" color="#ffc300" />
                  <span class="list" v-for="v in item.recommend" :key="v">{{
                    v
                  }}</span>
                </p>
              </div>
            </div>
          </van-tab>
          <van-tab :title="`满意${goodRateList.length}`">
             <div class="title df" v-for="item in goodRateList" :key="item.rateTime">
              <img class="gg" :src="item.avatar" alt="" />
              <div class="user">
                <div class="df jcsb">
                  <p class="ko">{{ item.username }}</p>
                  <p>{{ item.rateTime }}</p>
                </div>
                <p>
                  <van-rate
                    class="s1"
                    v-model="value"
                    :size="10"
                    color="#ffd21e"
                    void-icon="star"
                    void-color="#eee"
                  />
                  {{ item.deliveryTime }}<span>分钟送达</span>
                </p>
                <p>{{ item.text }}</p>
                <p class="ee">
                  <van-icon name="good-job-o" size="20" color="#ffc300" />
                  <span class="list" v-for="v in item.recommend" :key="v">{{
                    v
                  }}</span>
                </p>
              </div>
            </div>
          </van-tab>
          <van-tab :title="`不满意${badRateList.length}`">
             <div class="title df" v-for="item in badRateList" :key="item.rateTime">
              <img class="gg" :src="item.avatar" alt="" />
              <div class="user">
                <div class="df jcsb">
                  <p class="ko">{{ item.username }}</p>
                  <p>{{ item.rateTime }}</p>
                </div>
                <p>
                  <van-rate
                    class="s1"
                    v-model="value"
                    :size="10"
                    color="#ffd21e"
                    void-icon="star"
                    void-color="#eee"
                  />
                  {{ item.deliveryTime }}<span>分钟送达</span>
                </p>
                <p>{{ item.text }}</p>
                <p class="ee">
                  <van-icon name="good-job-o" size="20" color="#ffc300" />
                  <span class="list" v-for="v in item.recommend" :key="v">{{
                    v
                  }}</span>
                </p>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
      <!-- {{rateList}} -->
    </div>
  </div>
</template>

<script>
// import { getShopRateReq } from "@/api/shop";
import { mapGetters, mapState } from "vuex";

export default {
  data() {
    return {
      commentData: [],
      value: 4.5,
      activeKey: 0,
    };
  },
  computed: {
    ...mapState("shop", ["rateList"]),
    ...mapGetters("shop", ["goodRateList", "badRateList"]),
  },
  methods: {
    onClick(index) {
      console.log("index :>> ", index);
      this.activeKey = index;
      console.log(activeKey);
    },
    // async getData() {
    //   let res = await getShopRateReq();
    //   let { data } = res.data;
    //   this.commentData = res.data;
    //   console.log(this.commentData);
    // },
  },
  created() {
    // this.getData();
    this.$store.dispatch("shop/A_getShopRate");
  },
};
</script>

<style lang="scss" scoped>
.ko {
  font-weight: bold;
}
.top {
  height: 200px;
  padding: 0 60px;
  background: #fff;
  margin-bottom: 50px;
  .left {
    border-right: 2px solid #e8e8e8;
    width: 180px;
    h2 {
      color: #ffc300;
      font-size: 38px;
      font-weight: bold;
      text-align: center;
    }
    h3 {
      font-weight: bold;
      text-align: center;
      margin-top: 10px;
    }
  }
  .p1 {
    color: #ccc;
  }
  .s1 {
    color: #ffc300;
    margin-left: 8px;
  }
  .s2 {
    color: #ccc;
    margin-left: 8px;
  }
  .right {
    width: 230px;
  }
}
.title {
  height: 300px;
  background: #fff;
  border-bottom: 1px solid #e7e6e6;
}
:deep(.van-tabs__nav) {
  width: 300px;
}
p {
  margin: 0;
  padding: 10px;
}
.ee {
  height: 40px;
}
.gg {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  margin-top: 50px;
  margin-left: 20px;
}
.list {
  border: 1px solid #dcdbdb;
  color: #ccc;
  padding: 5px;
  margin: 5px;
  border-radius: 5px;
  font-size: 13px;
  display: inline-block;
}
.user {
  margin-left: 20px;
  margin-top: 20px;
  width: 100%;
  padding: 020px;
}

.navs {
  height: 50px;
  text-align: center;
  font-weight: bold;
  line-height: 50px;
}
.box {
  background: #fff;
  padding-top: 20px;
}
.o1 {
  color: #000;
  background: #ffc300;
}
.o2 {
  border-right: 2px solid #ffc300;
  color: #ffc300;
}
.o3 {
  color: #ffc300;
}
</style>
